<template>
  <div class="yy-page yy-base-category">
    <div class="yy-page-header">
      <div class="yy-page-header_title">医技类别</div>
      <div class="yy-page-header_action">
        <el-button  @click="getCategoryList()">刷新</el-button>
        <el-button color="#009688" @click="onOpenDialog()">新增类目</el-button>
      </div>
    </div>
    <div class="yy-page-data">
       <WidgetTable  :is-loading="table.isLoading" :columns="table.columns" :data="table.data" :formats="table.formats" :paging-data="table.paging"></WidgetTable>
    </div>
    <WidgetFormDialog ref="widgetFormDialogRef"
                      :form-fields="dialog.formFields"
                      :model-instance="dialog.modelInstance"
                      :save-api-fun="dialog.saveApiFun"
                      :update-api-fun="dialog.updateApiFun"
                      :option="{
                      businessName: '类目'
                    }"
                      @edit-callback="onEditCallback"
    />
  </div>
</template>

<script setup lang="ts">

import {onBeforeMount, reactive, ref} from "vue";
import {TableColumn, WidgetFormField} from "@/model/Definition";
import {BaseModel} from "@/model/BaseModel";
import {formatDate} from "@/utils/yayi";
import {ElMessage} from "element-plus";
import YjCategoryApi from "@/api/queue/YjCategoryApi";
import WidgetTable from "@/components/widget/WidgetTable.vue";
import WidgetFormDialog from "@/components/widget/WidgetFormDialog.vue";
import {QueueYjCategoryModel} from "@/model/QueueYjCategoryModel";

const dialog = reactive<{formFields: WidgetFormField[],modelInstance: BaseModel, saveApiFun: any, updateApiFun: any}>({
  modelInstance: new QueueYjCategoryModel(),
  saveApiFun: YjCategoryApi.saveYjCategory,
  updateApiFun: YjCategoryApi.updateYjCategory,
  formFields: [
    {field: 'name', label: '名称', type: 'text', placeholder: '请输入名称', required: [{required: true, message: '类目名称不能为空', trigger: 'blur'}]},
    {field: 'code', label: '代码', type: 'text', placeholder: '请输入代码', required: [{required: true, message: '类目代码不能为空', trigger: 'blur'}]},
  ]
})

const table = reactive<{
  isLoading: boolean,
  paging: any,
  columns: TableColumn[],
  data: QueueYjCategoryModel[],
  formats?: any
}>({
  isLoading: false,
  columns: [
    {
      "field":"index",
      "label":"序号",
      "type": "index",
      "showable":true,
      "align": 'center',
      "width": 60,
      "fixed": 'left'
    },
    {
      "field":"name",
      "label":"名称",
      "showable":true,
      "fixed": 'left'
    },
    {
      "field":"code",
      "label":"代码",
      "showable":true
    },
    {
      "field":"updateTime",
      "label":"更新时间",
      "showable":true,
      "width": 160
    },
    {
      "field":"action",
      "label":"操作",
      "width": 150,
      "showable":true,
      "fixed": 'right'
    }
  ],
  paging: {
    isPaging: false,
  },
  data: [],
  formats: {
    'updateTime': {
      labelFormat: (val) =>formatDate(val)
    },
    'action': {
      items: [
        {label: '编辑', elType: 'button', value: 'edit', atClick: (category: QueueYjCategoryModel) => onOpenDialog(category)},
        {label: '删除', elType: 'button', value: 'delete',  confirm: {title: '您确定要删除改类目吗？', atConfirm: (category: QueueYjCategoryModel) => onDeleteCategory(category)}}
      ]
    }
  }
})

const widgetFormDialogRef = ref()

onBeforeMount(() => {
  getCategoryList()
})

const getCategoryList = () => {
  table.isLoading = true
  YjCategoryApi.listYjCategory().then((data) => {
    table.data = data
    table.isLoading = false
  }, () => {
    table.isLoading = false
  })
}

const onOpenDialog = (category?: QueueYjCategoryModel) => {
  widgetFormDialogRef.value.onShowDialog(category)
}

const onDeleteCategory = (category: QueueYjCategoryModel) => {
  YjCategoryApi.deleteYjCategory(category.id).then(() => {
    const index = table.data.findIndex(item => item.id === category.id);
    table.data.splice(index, 1)
    ElMessage.success({
      message: '挂号类目删除成功',
      showClose: true
    })
  })
}


const onEditCallback = (category: QueueYjCategoryModel) => {
  const index = table.data.findIndex(item => item.id === category.id);
  if (index < 0) {
    table.data.unshift(category)
  } else {
    table.data.splice(index, 1, category)
  }
}
</script>

<style scoped lang="scss">
.yy-base-category {
  height: 100%;
}
</style>